<script>
import ToolButton from './ToolButton'

export default {
  name: 'ToolBar',
  components: {
    ToolButton
  },
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      toolList1: [
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '文本',
          category: 'Function'
        },
        {
          type: 'Select',
          icon: 'discount',
          text: '标题',
          category: 'Component',
          childrenList: [
            { text: '标题1' },
            { text: '标题2' },
            { text: '标题3' },
            { text: '标题4' },
            { text: '标题5' }
          ]
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '无序列表',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '有序列表',
          category: 'Function'
        },
        {
          type: 'Select',
          icon: 'discount',
          text: '对齐',
          category: 'Component',
          childrenList: [
            { text: '左对齐' },
            { text: '右对齐' }
          ]
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '答题区',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '提示',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '警告',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '标签',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '高亮显示',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '超链接',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'magic-stick',
          text: '参考',
          category: 'Function'
        },
        {
          type: 'Select',
          icon: 'discount',
          text: '角标',
          category: 'Component',
          childrenList: [
            { text: '数学公式' },
            { text: '变量' },
            { text: '上角标' },
            { text: '下角标' },
            { text: '分数' }
          ]
        }
      ],
      toolList2: [
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '段落',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '图片',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '视频',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '表格',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '设备表格',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '复选框',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '答案检查',
          category: 'Function'
        },
        {
          type: 'Button',
          icon: 'chat-line-square',
          text: '文本',
          category: 'Function'
        }
      ]
    }
  },
  methods: {
    handleBtnClick(e) {
      this.$emit('toolChange', e)
    }
  }
}
</script>

<template>
  <div class="component-tool-bar-container">
    <template v-if="current === 0">
      <tool-button v-for="(item, index) in toolList1"
                   class="toolBtn"
                   :key="'tool-button1_' + index"
                   :type="item['type']"
                   :icon="item['icon']"
                   :category="item['category']"
                   :children-list="item['category'] === 'Component' ? item['childrenList'] : []"
                   :text="item['text']" @click="handleBtnClick(item)" />
    </template>
    <template v-if="current === 1">
      <tool-button v-for="(item, index) in toolList2"
                   class="toolBtn"
                   :key="'tool-button2_' + index"
                   :type="item['type']"
                   :icon="item['icon']"
                   :category="item['category']"
                   :children-list="item['category'] === 'Component' ? item['childrenList'] : []"
                   :text="item['text']" @click="handleBtnClick(item)" />
    </template>
  </div>
</template>

<style lang="scss">
.component-tool-bar-container {
  height: 64px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  padding-left: 8px;

  .toolBtn {
    margin-right: 6px;

    &:last-child {
      margin: 0;
    }
  }
}
</style>
